<template>
  <div class="newStudentContainer">
    <div
      class="dialog animated"
      :class="open ? 'fadeIn' : 'fadeOut'"
      v-show="show"
      :style="{ visibility: visible ? 'visible' : 'hidden' }"
    >
      <div class="panel animated" :class="open ? 'zoomIn' : ''">
        <div class="title" style="font-size: 0.22rem;color: #333333;">
          {{title}}
          <div class="close" @click="cancel()"></div>
        </div>
        <div class="condition">
          <div class="row_one" style="padding-top:0rem;">
            <el-date-picker
              style="width:4.2rem;"
              v-model="timeText"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
            <div class="search_btn" @click="initData" style="margin-left:0.1rem;">搜索</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 6rem;">上课时间</td>
                <td style="width: 4rem;">班级学员</td>
                <td style="width: 4rem;">会员</td>
                <td style="width: 4rem;">试听用户</td>
                <td style="width: 4rem;">候补区</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="li,index in studentList">
                <td>
                  <div style="display: flex;justify-content: center;align-items: center;">
                    <div>{{li.startTime}}</div>
                    <div v-if="isHasShowBtn(li)" class="name_img_zhaosheng"></div>
                    <div v-else-if="isHasShowNo(li)" class="name_img_jieke"></div>
                  </div>
                </td>
                <td
                  style="cursor: pointer;"
                  @click="gotoClassStudent(li)"
                >{{li.totalCount}}/{{classInfo.recruitNum}}</td>
                <td style="cursor: pointer;" @click="gotoClassStudent(li)">{{li.memberCount}}</td>
                <td style="cursor: pointer;" @click="gotoClassStudent(li)">{{li.trailCount}}</td>
                <td style="cursor: pointer;" @click="gotoClassStudent(li)">{{li.candidateCount}}</td>
                <td>
                  <span
                    v-if="isHasShowBtn(li) && !isFromFileClass"
                    @click="enterClass_file(li)"
                    class="operate_btn"
                  >进班&nbsp;</span>
                  <span v-if="isHasShowYes(li) && !isFromFileClass" @click="deadline(li)" class="operate_btn">截止报名</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="param.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="count"
        ></el-pagination>
      </div>
      <!-- 约课班级进班 -->
      <studentEntryFile ref="studentEntryFile1" @callback="closeClassStudent"></studentEntryFile>
      <!-- 班级学员 -->
      <classStudent ref="classStudent1" @callback="closeClassStudent"></classStudent>
      
    </div>
    <el-dialog
        title="截止报名"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="30%"
        center
        top="10%"
      >
        <div style="font-size:0.16rem;">上课时间：{{currentDeadSyllabus.startTime}}</div>
        <div style="font-size:0.16rem;margin-top:0.2rem;">
          上课前
          <el-input-number
            size="small"
            controls-position="right"
            class="newclassroomNumber"
            style="width:16%;"
            v-model="currentDeadSyllabus.subscribeDeadline"
            :min="1"
            :max="9999"
          ></el-input-number>
          <el-select
            v-model="currentDeadSyllabus.subscribeDeadlineUnit"
            type="number"
            placeholder="请选择"
            style="width:14%; "
          >
            <el-option
              v-for="item in timeModeList"
              :key="item.name"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>&nbsp;截止报名
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="studentDead">确定修改</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
var vm, user;
import studentEntryFile from "./studentEntry_file";
import classStudent from "./class_student";
export default {
  components: {
    classStudent,
    studentEntryFile
  },
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      studentList: [],
      title: "班级学员",
      classInfo: {},
      count: 0,
      timeText: [],
      param: {
        startTime: "",
        endTime: "",
        classId: "",
        currPage: 1,
        pageSize: 10
      },
      currentDeadSyllabus: {
        //当前修改截止报名的课节
        classSyllabusId: "",
        subscribeDeadline: "",
        subscribeDeadlineUnit: "",
        startTime: ""
      },
        isFromFileClass:false,
      timeModeList: [], //时间类型
      dialogVisible: false
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.classInfo = data.classInfo;
      vm.title = data.classInfo.className;
      vm.param.classId = data.classInfo.classId;
      vm.isFromFileClass = data.isFromFileClass ?data.isFromFileClass:false;
      this.initData();
    },
    studentDead() {
      let paras = {
        classSyllabusId: vm.currentDeadSyllabus.classSyllabusId,
        subscribeDeadline: vm.currentDeadSyllabus.subscribeDeadline,
        subscribeDeadlineUnit: vm.currentDeadSyllabus.subscribeDeadlineUnit
      };
      api.subscriptionUpdate(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "修改成功",
            type: "success"
          });
          vm.dialogVisible = false;
          vm.initData();
        } else {
          vm.$message({
            message: data.message,
            type: "warning"
          });
        }
      });
    },
    /**截止报名 */
    deadline(item) {
      vm.currentDeadSyllabus = {
        //当前修改截止报名的课节
        classSyllabusId: item.classSyllabusId,
        subscribeDeadline: item.subscribeDeadline,
        subscribeDeadlineUnit: item.subscribeDeadlineUnit,
        startTime: item.startTime
      };
      vm.dialogVisible = true;
    },
    /**进入班级学员列表 */
    gotoClassStudent(li) {
      let endLine = vm.classInfo.classSubscription.leaveDeadline;
      let endUnit = vm.classInfo.classSubscription.leaveDeadlineUnit;
      let endTime = 0;
      let startTime = Date.parse(new Date(li.startTime + ":00"));
      if (endUnit == 3) {
        //天
        endTime = startTime - 86400 * endLine * 1000;
      } else if (endUnit == 2) {
        //小时
        endTime = startTime - 3600 * endLine * 1000;
      } else if (endUnit == 1) {
        //分钟
        endTime = startTime - 60 * endLine * 1000;
      }
      var currentTime = Date.parse(new Date());
      let isHasLeave = currentTime <= endTime;
      this.$refs.classStudent1.init({
        isHasLeave: isHasLeave,
        syllabusId: li.classSyllabusId,
        startTime: li.startTime
      });
    },
    /**班级约课进班回调 */
    closeClassStudent(data) {
      this.initData();
    },
    /**进班 */
    enterClass_file(item) {
      this.$refs.studentEntryFile1.init({ item: vm.classInfo, li: item });
    },
    /**是否显示进班按钮 */
    isHasShowBtn(item) {
      let endLine = item.subscribeDeadline;
      let endUnit = item.subscribeDeadlineUnit;
      let endTime = 0;
      let startTime = Date.parse(new Date(item.startTime + ":00"));
      if (endUnit == 3) {
        //天
        endTime = startTime - 86400 * endLine * 1000;
      } else if (endUnit == 2) {
        //小时
        endTime = startTime - 3600 * endLine * 1000;
      } else if (endUnit == 1) {
        //分钟
        endTime = startTime - 60 * endLine * 1000;
      }
      var currentTime = Date.parse(new Date());
      return currentTime <= endTime;
    },
    /**是否显示已结课 */
    isHasShowNo(item) {
      var currentTime = Date.parse(new Date());
      let endTime = Date.parse(new Date(item.endTime + ":00"));
      return currentTime > endTime;
    },
    /**是否显示截止报名 */
    isHasShowYes(item) {
      var currentTime = Date.parse(new Date());
      let startTime = Date.parse(new Date(item.startTime + ":00"));
      return currentTime <= startTime;
    },
    pageSizeChange: function(val) {
      this.param.pageSize = val;
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.param.currPage = val;
      this.initData();
    },
    initData() {
      if (vm.timeText == null) vm.timeText = [];
      if (vm.timeText.length != 0) {
        vm.param.startTime = vm.timeText[0];
        vm.param.endTime = vm.timeText[1];
      }
      api.getStatisticByClassId(vm.param).then(function(data) {
        if (data.resultCode == 2000) {
          vm.studentList = data.list;
          vm.count = data.totalCount;
        } else {
          vm.$message({
            message: data.message,
            type: "warning"
          });
        }
      });
    },
    cancel: function() {
      //隐藏弹窗
      vm.$emit("callback", "添加成功");
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        this.studentList = [];
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let dicdata = tool.getItem(lsKey.dict, true);
    this.timeModeList = dicdata["time_mode"]; //班级约课模式
  }
};
</script>
<style lang="scss">
.newStudentContainer {
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .el-checkbox__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .name_img_jieke {
    margin-left: 0.04rem;
    width: 0.42rem;
    height: 0.2rem;
    background-image: url(~@keer/assets/img/education_manage/jieke.png);
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>





